export function displayCategories(categories) {
    const categoryContainer = document.getElementById('category-container');
    categoryContainer.innerHTML = '';

    categories.forEach(category => {
        const categoryButton = document.createElement('button');
        categoryButton.innerText = category.name;
        categoryButton.onclick = () => handleCategorySelection(category.id);
        categoryContainer.appendChild(categoryButton);
    });
}

export function handleCategorySelection(categoryId) {
    // Logic to fetch and display albums based on the selected category
    fetchAlbumDetails(categoryId)
        .then(albums => displayAlbums(albums))
        .catch(error => console.error('Error fetching albums:', error));
}

function displayAlbums(albums) {
    const albumContainer = document.getElementById('album-container');
    albumContainer.innerHTML = '';

    albums.forEach(album => {
        const albumButton = document.createElement('button');
        albumButton.innerText = album.title;
        albumButton.onclick = () => downloadAudio(album.audioUrl);
        albumContainer.appendChild(albumButton);
    });
}

export function downloadAudio(audioUrl) {
    // Logic to download the audio file
    const link = document.createElement('a');
    link.href = audioUrl;
    link.download = audioUrl.split('/').pop();
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
}